<template>
	<view class="container">
		<view class="video">
			<video class="myVideo" id="myVideo" autoplay :show-mute-btn="show_mute_btn" :enable-play-gesture="enable_play_gesture" :show-center-play-btn="show_center_play_btn" :page-gesture="page_gesture" :src="videoSrc" controls @timeupdate="handleTimeUpdate"></video>
		</view>
		<view class="content">
			<view class="head">
				<view class="title">
					<text>{{title}}</text>
					<view @click="handleVisible">
						<image class="image" src="../static/image/open.png" mode=""></image>
					</view>
				</view>
				<view class="dec">
					<view class="count">
						<u-icon size="16" name="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/ad3c25ec-c8d9-4a74-9cde-5e466f853e22.png"></u-icon>
						<text>播放量：{{numberToWan(viewCounts)}}</text>
					</view>
					<view class="duration">
						<u-icon size="16" name="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/f16e272c-3b87-40e7-9e68-b6be919230ef.png"></u-icon>
						<text>{{duration}}</text>
					</view>
					<view class="num">
						<u-icon size="16" name="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/931a17e6-e329-4e9f-8417-8370989a1b96.png"></u-icon>
						<text>共{{dataList.length || '0'}}节</text>
					</view>
				</view>
			</view>
			<view class="tab">
				<u-sticky bgColor="#fff">
					<u-tabs :current="current" :list="list" lineColor="#ff702a" lineWidth="40" :inactiveStyle="{color:'#5B5E63'}" :activeStyle="{fontWeight: 'bold',color: '#32363C'}" @click="handleTab"></u-tabs>
				</u-sticky>
			</view>
			<view class="lessons" v-if="current == 0">
				<view class="lessons_item" v-for="(item,index) in dataList" :key="item.videoCatalogueId" @click="playAt(item,index)">
					<view class="lessons-left">
						<view class="name" :class="{'activeName':index == num}">
							<text>{{item.chapter}} {{item.headline}}</text>
							<image class="image" src="../static/image/vip.png" mode="" v-if="item.isVip == 1"></image>
						</view>
						<view class="l-duration">时长：{{item.duration}}</view>
					</view>
					<view class="lessons-right">
						<image class="icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/5e14ca11-bf51-401e-9733-83057d87bb57.png" v-if="item.isPlaying == false"></image>
						<image class="icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/f76f3e8e-6f14-46f5-8c22-820fa2f90195.png" v-else></image>
					</view>
				</view>
			</view>
			<view class="captions" v-else>
				<view class="input-view">
					<u-input placeholder="在弹幕中搜索" shape="circle">
						<template slot="prefix">
							<u-icon size="16" name="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/7798330e-c3c9-4952-ae50-1e4b8416b310.png"></u-icon>
						</template>
					</u-input>
				</view>
				<view class="paging">
					<view class="paging-item" @click="seekTo">
						<view class="time">00:10</view>
						<view class="text">刷出这条金句 闪亮全场目光刷出这条金句 闪亮全场目光刷出这条金句 闪亮全场目光刷出这条金句 闪亮全场目光</view>
					</view>
					<view class="paging-item" @click="seekTo">
						<view class="time">00:10</view>
						<view class="text">刷出这条金句 闪亮全场目光</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="visible" mode="bottom" @close="visible = false" @open="visible = true" round="24">
			<view class="popup-content">
				<view class="clear" @click="handleClear">
					<image class="clean-up" src="../static/image/clear.png" mode=""></image>
				</view>
				<view class="head-title">试用结束，开通立享会员特权</view>
				<!-- 会员权益 -->
				<view class="member-equity">
					<view class="title">会员权益</view>
					<view class="equity-list">
						<view class="equity-item">
							<image class="icon" src="../static/image/equity1.png" mode=""></image>
							<text>经络全图</text>
						</view>
						<view class="equity-item">
							<image class="icon" src="../static/image/equity2.png" mode=""></image>
							<text>完整体质</text>
						</view>
						<view class="equity-item">
							<image class="icon" src="../static/image/equity3.png" mode=""></image>
							<text>舌诊检测</text>
						</view>
						<view class="equity-item">
							<image class="icon" src="../static/image/equity4.png" mode=""></image>
							<text>中医调理</text>
						</view>
					</view>
				</view>
				<!-- 选择套餐 -->
				<view class="package-view">
					<view class="title">选择套餐</view>
					<view class="package-list">
						<view class="package-item" :class="{'activeMeal':index == mealNum}" v-for="(item,index) in mealList" :key="index" @click="handleMeal(item,index)">
							<view class="duration">{{item.vipName}}</view>
							<view class="new-price">¥{{item.price}}</view>
							<view class="old-price">¥{{item.price}}</view>
							<view class="compute" :class="{'computeActive':index == mealNum}">折合0.16元/天</view>
						</view>
					</view>
				</view>
				<!-- 阅读协议 -->
				<view class="agree">
					<radio @click="change" :checked="is_true" color ="#FF702A"/>
					已阅读并同意<a href="">❬❬会员协议❭❭</a>
				</view>
				<!-- 立即开通 -->
				<!-- <view @click="open" class="btn">
					<view>
						<image class="btn-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/c102ecf3-b456-4597-9041-67b11c96cc06.png"></image>
					</view>
					<text style="padding-right: 6rpx;" v-if="mealNum != null">￥{{price}}</text> &nbsp;立即开通
				</view> -->
				<view class="footer">
					<view @click="open">
						<view>
							<image class="btn-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/c102ecf3-b456-4597-9041-67b11c96cc06.png"></image>
						</view>
						<view class="open-text">
							<text style="padding-right: 6rpx;" v-if="mealNum != null">￥{{price}}</text> &nbsp;立即开通
						</view>
					</view>
				</view>
				
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import uSticky from 'uview-ui/components/u-sticky/u-sticky.vue';
	//引入请求文件
	import {listing,publicing} from '../../api/api.js'
	import {catalogue,record,vipList,pay,videoUrl,userInfo} from '../../api/request.js'
	export default {
	components: { uSticky },
    data() {
        return {
           page_gesture:true,
		   show_center_play_btn:false,
		   enable_play_gesture:true,
		   show_mute_btn:true,
		   //目录
		   dataList:[],
		   //视频地址
		   videoSrc:'',
		   title:'',
		   duration:'',
		   viewCounts:'',
		   list:[
			   {
				   name:'目录'
			   },
			   {
				   name:'字幕'
			   }
		   ],
		   num: 0,
		   current: 0,
		   visible:false,
		   is_true: false,
		   mealList:[],
		   mealNum:null,
		   videoCatalogueId:'',
		   videoTime:0,
		   price:'',
		   vipId:'',
		   userdata:{},//用户信息
		   id:''
        }
    },
	onShow(){
		this.getInfo()
	},
	onLoad(e) {
		this.id = e.id
		this.getCatalogue(e.id)
	},
	created() {
		this.getdata()
	},
	onUnload(){
		//记录播放历史
		listing(record+`?videoCatalogueId=${this.videoCatalogueId}&videoTime=${this.videoTime}`)
	},
    methods: {
		//获取用户信息
		getInfo(){
			listing(userInfo)
			.then(res=>{
				if(res.data.code === 200){
					this.$store.commit('getUserInfo',res.data?.data)
					this.userdata = res.data?.data
				}
			})
		},
		getdata(){
			listing(vipList).then(res=>{
				if(res.data.code == 200){
					this.mealList = res.data?.data
				}
			})
		},
		numberToWan(num){
			if(num >= 10000){
				return (num / 10000).toFixed(2)+'万'
			}else{
				return num
			}
		},
		handleTimeUpdate(e){
			this.videoTime = Math.round(e.detail.currentTime);
		},
		change(){
			this.is_true = !this.is_true
		},
		getCatalogue(id){
			listing(catalogue+`?videoInfoId=${id}&pageNum=1&pageSize=10000`)
			.then(res=>{
				if(res.data.data?.records.length == 0) return
				this.title = res.data.data?.records[0].headline
				this.videoCatalogueId = res.data.data?.records[0].videoCatalogueId
				this.duration = res.data.data?.records[0].duration
				this.viewCounts = res.data.data?.records[0].viewCounts
				this.getVideoUrl(res.data.data?.records[0].videoCatalogueId)
				res.data.data?.records.forEach(v=>{
					this.$set(v,'isPlaying',false)
				})
				this.dataList = res.data.data?.records
				this.dataList[0].isPlaying = true
			})
		},
		getVideoUrl(id){
			listing(videoUrl+`?catalogueId=${id}`)
			.then(res=>{
				if(this.userdata.boughtVip != 1){
					this.visible = true
					this.videoSrc = ''
				}else{
					this.videoSrc = res.data?.data.videoUrl
					this.visible = false
				}
			})
		},
		playAt({headline,videoCatalogueId,duration,viewCounts},index){
			this.num = index
			this.getVideoUrl(videoCatalogueId)
			this.title = headline
			this.duration = duration
			this.viewCounts = viewCounts
			this.videoCatalogueId = videoCatalogueId
			this.dataList.forEach(item => {
			  if (item.videoCatalogueId === videoCatalogueId) {
				item.isPlaying = true
			  }else{
				  item.isPlaying = false
			  }
			});
		},
		seekTo(){
			const videoContext = uni.createVideoContext('myVideo', this);
			videoContext.seek(10);
			videoContext.play();
		},
		//切换tab
		handleTab({index}){
			this.current = index
		},
		handleVisible(){
			this.visible = true
		},
		handleClear(){
			this.visible = false
		},
		handleMeal({price,id},index){
			this.price = price
			this.vipId = id
			this.mealNum = index
		},
		open(){
			if(this.mealNum == null) return uni.showToast({"title": "请选择会员","icon": "none"})
			if (this.is_true == false) return uni.showToast({"title": "请同意会员协议","icon": "none"})
			this.getCode()
		},
		getCode(){
			uni.showLoading({title:'支付中'})
			uni.login({
				success:(res)=>{
					this.getWx(res.code)
				},
				fail:(err)=>{
					console.log(err)
					uni.hideLoading();
				}
			})
		},
		getWx(code){
			publicing(pay,{
				vipId: this.vipId,
				code
			}).then(res=>{
				if(res.data.code == 200){
					this.onPay(res.data.data)
				}else{
					uni.hideLoading();
				}
				this.num = null
			})
			.catch(err=>{
				uni.hideLoading();
			})
		},
		onPay(obj){
			uni.hideLoading();
			uni.requestPayment({
				...obj,
				success:(res)=>{
					this.$refs.uToast.show({
						type: 'success',
						message: '支付成功'
					})
					this.visible = false
					this.getInfo()
					this.getCatalogue(this.id)
				},
				fail:(err)=>{
					this.getInfo()
					this.getCatalogue(this.id)
				}
			})
		}
    }
}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		.video{
			width: 100vw;
			height: 30vh;
			.myVideo{
				width: 100vw;
				height: 30vh;
			}
		}
		.content{
			.head{
				padding: 28rpx 0rpx;
				margin: 0rpx 40rpx;
				background-color: white;
				margin-top: 10rpx;
				border-bottom: 1rpx solid #f1f1f1;
				.title{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 24rpx;
					.image{
						width: 48rpx;
						height: 48rpx;
					}
				}
				.dec{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #333;
					.count{
						display: flex;
						align-items: center;
						margin-right: 30rpx;
						text{
							margin-left: 6rpx;
						}
					}
					.duration{
						display: flex;
						align-items: center;
						margin-right: 30rpx;
						text{
							margin-left: 6rpx;
						}
					}
					.num{
						display: flex;
						align-items: center;
						text{
							margin-left: 6rpx;
						}
					}
				}
			}
			.tab{
				display: flex;
				justify-content: center;
				
			}
		}
		.lessons{
			padding: 30rpx;
			.lessons_item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				margin-bottom: 40rpx;
				.lessons-left{
					.name{
						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						font-weight: bold;
						margin-bottom: 12rpx;
						.image{
							width: 48rpx;
							height: 48rpx;
							margin-left: 10rpx;
						}
					}
					.activeName{
						color: #FF702A;
						font-weight: bold;
					}
					.l-duration{
						font-size: 24rpx;
						color: #5a5752;
					}
				}
				.lessons-right{
					.icon{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.captions{
			padding: 0 30rpx;
			margin-top: 30rpx;
			.input-view{
				/deep/.u-input{
					background: #f7f5f0 !important;
					color: #333;
				}
				/deep/.u-icon__icon{
					font-size: 40rpx !important;
				}
			}
			.paging{
				margin-top: 40rpx;
				.paging-item{
					display: flex;
					align-items: center;
					margin-bottom: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
					.time{
						color: #bd9a5e;
						margin-right: 30rpx;
					}
					.text{
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
		.popup-content{
			position: relative;
			background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/9/a45c1860-d9a8-40ea-8856-757209f0ef61.png');
			background-repeat: no-repeat;
			background-size: cover;
			// background-position: center center;
			// padding-bottom: 80rpx;
			border-top-left-radius: 48rpx;
			border-top-right-radius: 48rpx;
			.clear{
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				.clean-up{
					width: 48rpx;
					height: 48rpx;
				}
			}
			.head-title{
				font-size: 36rpx;
				font-weight: 700;
				color: #140F08;
				text-align: center;
				margin-top: 40rpx;
			}
			.member-equity{
				padding: 0 46rpx;
				margin-top: 60rpx;
				.title{
					color: #140F08;
					font-size: 32rpx;
				}
				.equity-list{
					display: flex;
					justify-content: space-between;
					margin-top: 32rpx;
					.equity-item{
						display: flex;
						flex-direction: column;
						align-items: center;
						.icon{
							width: 88rpx;
							height: 88rpx;
							padding-bottom: 12rpx;
						}
					}
				}
			}
			.package-view{
				margin-top: 40rpx;
				// padding: 0 46rpx;
				padding: 0 32rpx;
				.title{
					color: #140F08;
					font-size: 32rpx;
					padding-left: 14rpx;
				}
				.package-list{
					display: flex;
					// justify-content: space-between;
					align-items: center;
					margin-top: 24rpx;
					.package-item{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						width: 212rpx;
						height: 240rpx;
						background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/9/efa00e59-5ab9-4978-9625-20d81cd1efb8.png');
						background-repeat: no-repeat;
						background-size: cover;
						background-position: center;
						margin-right: 24rpx;
						padding: 18rpx 0;
						box-sizing: border-box;
						&:last-child{
							margin-right: 0;
						}
						.duration{
							font-size: 28rpx;
							color: #32363C;
						}
						.new-price{
							font-size: 56rpx;
							color: #32363C;
							font-weight: 700;
							margin: 3rpx 0;
						}
						.old-price{
							font-size: 24rpx;
							color: #5B5E63;
							text-decoration: line-through;
						}
						.compute{
							font-size: 20rpx;
							color: #999B9E;
							background: #E0E1E2;
							padding: 6rpx 20rpx;
							border-radius: 6rpx;
							margin-top: 14rpx;
							box-sizing: border-box;
						}
						.computeActive{
							color: #FF8D55;
							background: #FFDDC3;
						}
					}
					.activeMeal{
						background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/9/0e80aaa1-4266-46da-aca3-fe8b782ae241.png');
					}
				}
			}
			.agree{
				width: 100%;
				display: flex;
				color: #140F08B3;
				padding: 40rpx 24rpx 36rpx;
				font-size: 28rpx;
				align-items: center;
				radio{
					transform: scale(.7);
				}
				a{
					color: #FF770F;
					padding: 0 6rpx;
				}
			}
			// .btn{
			// 	width: 620rpx;
			// 	height: 96rpx;
			// 	background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/c4f8a74e-96c9-4540-b784-819c25288632.png');
			// 	background-repeat: no-repeat;
			// 	background-size: cover;
			// 	background-position: center;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// 	color: #5e4111;
			// 	font-size: 32rpx;
			// 	margin: auto;
			// }
			.footer{
				position: relative;
				margin: 0 36rpx 60rpx;
				.btn-bg{
					width: 100%;
					height: 96rpx;
				}
				.open-text{
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					line-height: 96rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #fff;
				}
			}
		}
	}
</style>
